<template>
  <basic-dialog :visible="show"
                title="角色详情"
                min-width="670px"
                isShowClose
                @close="show = false"
                :isFullScreen="false"
                :hasFooterMargin="false"
                :isShowInnerLoading="isSubmitting"
  >
    <div class="card">
      <div class="row" style="padding: 20px 10px">
        <div class="col-6" style="padding: 0 10px">
          <div class="flex item" >
            <div class="w-100">员工编号：</div>
            <div class="flex-1 text-ellipsis">{{user.number  | toHorizontalLine}}
              <q-tooltip>{{user.number | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" >
            <div class="w-100">姓名：</div>
            <div class="flex-1 text-ellipsis">{{user.name  | toHorizontalLine}}
              <q-tooltip>{{user.name | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" >
            <div class="w-100">性别：</div>
            <div class="flex-1 text-ellipsis">{{user.gender  | toHorizontalLine}}
              <q-tooltip>{{user.gender | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" >
            <div class="w-100">手机号码：</div>
            <div class="flex-1 text-ellipsis">{{user.phone  | toHorizontalLine}}
              <q-tooltip>{{user.phone | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" >
            <div class="w-100">邮箱：</div>
            <div class="flex-1 text-ellipsis">{{user.email  | toHorizontalLine}}
              <q-tooltip>{{user.email | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" >
            <div class="w-100">IC 卡号：</div>
            <div class="flex-1 text-ellipsis">{{user.icCardNumber  | toHorizontalLine}}
              <q-tooltip>{{user.icCardNumber | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" >
            <div class="w-100">所属部门：</div>
            <div class="flex-1 text-ellipsis">{{selectedDepartment.label  | toHorizontalLine}}
              <q-tooltip>{{selectedDepartment.label | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" >
            <div class="w-100">岗位：</div>
            <div class="flex-1 text-ellipsis">{{user.postCode  | toHorizontalLine}}
              <q-tooltip>{{user.postCode | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" >
            <div class="w-100">角色：</div>
            <div class="flex-1 text-ellipsis">{{getLabel(getRoleName(user.roleIds))  | toHorizontalLine}}
              <q-tooltip>{{getLabel(getRoleName(user.roleIds)) | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" >
            <div class="w-100">技能水平：</div>
            <div class="flex-1 text-ellipsis">{{user.skillLevel  | toHorizontalLine}}
              <q-tooltip>{{user.skillLevel | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
          <div class="flex item" style="margin-bottom: 0">
            <div class="w-100">单价：</div>
            <div class="flex-1 text-ellipsis">{{user.price  | toHorizontalLine}}
              <q-tooltip>{{user.price | toHorizontalLine}}</q-tooltip>
            </div>
          </div>
        </div>
        <div class="col-6" style="padding: 0 10px">
          <!-- 照片 -->
          <div class="photo-box">
            <q-img
              class="photo"
              :src="user.photoUrl"
              spinner-color="white"
            >
              <div
                v-if="!user.photoUrl"
                style="height: 100%; width: 100%; background: #d0d6fb;"
              />
              <q-btn
                class="upload-btn"
                unelevated
                :disable="true"
                :class="{ 'dashed-border': !user.photoUrl }"
              >
                <q-icon
                  v-if="!user.photoUrl"
                  size="96px"
                  name="iconfont icontubiao-61"
                  color="white"
                />
              </q-btn>
            </q-img>
          </div>
          <div class="flex item margin-t-20" style="margin-bottom: 0">
            微信绑定：{{isWeChatConnected? '是' : '否'}}
          </div>
        </div>
      </div>
    </div>
  </basic-dialog>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import _ from 'lodash'
export default {
  name: 'user-detail',
  props: {
    /**
     * 树状结构的部门列表
     * default: []
     * required
     */
    departmentsTree: {
      type: Array,
      default: () => [],
      required: true
    },

    /**
     * 岗位 option 列表
     * default: []
     * required
     */
    postOptions: {
      type: Array,
      default: () => [],
      required: true
    },

    /**
     * 角色 option 列表
     * default: []
     * required
     */
    roleOptions: {
      type: Array,
      default: () => [],
      required: true
    },

    /**
     * 性别 option 列表
     * default: []
     * required
     */
    genderOptions: {
      type: Array,
      default: () => [],
      required: true
    },

    /**
     * 技能水平 option 列表
     * default: []
     * required
     */
    skillLevelOptions: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  data () {
    return {
      show: false,
      detail: {},
      // 用户详情对象
      // clone 自 props.detail
      user: {
        photoUrl: ''
      },
      forView: true,
      // form 正在提交
      isSubmitting: false
    }
  },
  methods: {
    ...mapMutations(['SET_GUIDELINES', 'SET_TOKEN', 'SET_REFRESHTOKEN']),
    showDialog (data) {
      this.show = true
      this.detail = data
      this._cloneDetailToUser()
    },
    // 获取角色名称
    getRoleName (val) {
      let roleName = []
      if (val && val.length) {
        val.forEach(val => {
          this.roleOptions.forEach(item => {
            if (val === item.value) {
              roleName.push(item.label)
            }
          })
        })
      }
      return roleName
    },
    getLabel (list) {
      return _.join(list, '、')
    },
    /**
     * 重新组织 props.detail 的结构，并 clone 到 data.user
     */
    _cloneDetailToUser: function () {
      let o = this.detail
      if (o) {
        this.user = Object.assign({}, o, {
          departmentId: o.department ? o.department.id : undefined,
          roleIds: o.roles ? o.roles.map(role => role.id) : undefined,
          genderOptions: o.genderCode === undefined ? 1 : o.genderCode,
          photoUrl: o.photoUrl === undefined ? '' : o.photoUrl,
          email: o.email === '--' ? '' : o.email,
          postCode: this.postOptions.find(v => v.value === o.postCode) ? this.postOptions.find(v => v.value === o.postCode).label : '--',
          skillLevel: this.skillLevelOptions.find(v => v.value === o.skillLevelCode) ? this.skillLevelOptions.find(v => v.value === o.skillLevelCode).label : '--'
        })
      }

      this.user['gender'] = this.genderOptions.find(v => v.value === this.user.genderOptions) ? this.genderOptions.find(v => v.value === this.user.genderOptions).label : '--'
      delete this.user.department
      delete this.user.roles
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'client']),
    // 已关联微信账号
    isWeChatConnected: function () {
      return !!this.user.isWeChatConnected
    },

    // 平坦化的部门
    flattenedDepartments: function () {
      let flatArr = []

      // 递归平坦化每一级节点
      this.departmentsTree.forEach(flattenNode)

      function flattenNode (node) {
        flatArr.push(Object.assign({}, node, { children: undefined }))

        if (node.children instanceof Array) {
          node.children.forEach(flattenNode)
        }
      }

      return flatArr
    },

    // 适应 select tree 组件的逻辑缺陷，使其能正确地显示选中的部门
    selectedDepartment: function () {
      // 根据用户部门 ID 找出完整的部门对象
      for (let department of this.flattenedDepartments) {
        if (department.id === this.user.departmentId) {
          return department
        }
      }
      return {
        id: null,
        label: null,
        hash: null
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  /deep/ .q-field--outlined.q-field--readonly .q-field__control:before {
    border-style solid
  }
  .item{
    line-height 1.5
    margin-bottom 15px
  }
  .w-100{
    width 80px
    text-align right
  }
  .photo-box {
    display flex
    flex-direction column
    align-items center
    height 304px
    justify-content space-between

    .photo {
      height 304px
      width 304px
      border 1px solid #D3D3D3
      border-radius 6px

      .upload-btn {
        height 100%
        width 100%

        &.dashed-border:after {
          $border-padding = 28px
          content ""
          display block
          position absolute
          top 0
          left 0
          height "calc(100% - %s)" % $border-padding
          width "calc(100% - %s)" % $border-padding
          margin ($border-padding / 2)
          border 1px dashed #FFF
        }
      }
    }
  }
</style>
